<template>
  <div id="app" :style="styleVar">
    <div
      style="position: fixed; top: 93%; left: 20%; width: 50%"
      v-show="titleshow"
    >
      <el-alert :title="mytitle" type="error" show-icon :closable="false">
      </el-alert>
    </div>
    <router-view />
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      width: window.innerWidth + "px",
      height: `${window.innerHeight - 16}` + "px",
      evtSourceid: localStorage.getItem("zbsid"),
      mytitle: "",
      titleshow: false,
    };
  },
  computed: {
    styleVar() {
      return {
        "--box-width": this.whith,
        "--box-height": this.height,
      };
    },
  },
  mounted() {
    this.WebContextEvent();
  },
  methods: {
    closeEventSource() {
      if (this.evtSource) {
        this.evtSource.close();
        // console.log("Closed existing EventSource");
      }
    },
    WebContextEvent() {
      if (typeof EventSource !== "undefined") {
        // console.log("ccccccccccccccccccccccccccccccc");
        // `${window.electron.Eventsource}?id=${this.$store.state.warehouseId}&timeout=0&retryTime=10`
        this.closeEventSource();
        const evtSource = new EventSource(
          `${window.electron.Eventsource}?id=${this.evtSourceid}&timeout=0&retryTime=10`
        );
        // 处理来自服务器的消息
        evtSource.onmessage = (event) => {
          console.log(event, "message");
        };
        evtSource.addEventListener("open", () => {
          this.titleshow = false;
        });

        // 处理连接错误
        evtSource.onerror = (error) => {
          // evtSource.close();
          console.error("Server-Sent Event Error:", error);
          this.mytitle = "服务器已断开请重试";
          this.titleshow = true;
          if(this.$route.fullPath === "/SystemSettings" || this.$route.fullPath === "/"){
            this.titleshow = false;
          }
        };
        // 消息推送
        // 安全库存  1
        evtSource.addEventListener("safety_inventory", (e) => {
          const res = JSON.parse(e.data);
          this.$store.commit("ProductExpirationTime", res);
          console.log(res, "安全库存");
        });
        // 长时间未归还 2
        evtSource.addEventListener("error_property", (e) => {
          const res = JSON.parse(e.data);
          this.$store.commit("listErrorProperty", res);
          console.log(res, "资产异常");
        });
        // 耗材统计 3
        evtSource.addEventListener("item_inventory", (e) => {
          const res = JSON.parse(e.data);
          this.$store.commit("ConsumableStatistics", res);
          console.log(res, "耗材统计");
        });
        // 资产统计 4
        evtSource.addEventListener("property_inventory", (e) => {
          const res = JSON.parse(e.data);
          this.$store.commit("AssetStatistics", res);
          console.log(res, "资产统计");
        });
        //  出库纪录 5
        evtSource.addEventListener("item_and_property_history", (e) => {
          const res = JSON.parse(e.data);
          this.$store.commit("OutboundRecords", res);
          console.log(res, "出库纪录");
        });
        //  资产饼图 6
        evtSource.addEventListener("property_pie_char", (e) => {
          const res = JSON.parse(e.data);
          this.$store.commit("propertyPieChar", res);
          console.log(res, "资产饼图");
        });
        //  耗材饼图 7
        evtSource.addEventListener("item_pie_char", (e) => {
          const res = JSON.parse(e.data);
          this.$store.commit("itemPieChar", res);
          console.log(res, "耗材饼图");
        });
        //  连接失败 8
        evtSource.addEventListener("smart_door_disconnection", (e) => {
          this.titleshow = true;
          this.mytitle = e.data;
          console.log(e.data, "连接失败");
        });
        //  连接成功 9
        evtSource.addEventListener("smart_door_connection", (e) => {
          this.titleshow = false;
          this.mytitle = "";
          console.log(e.data, "连接成功");
        });
        // 监听错误
        // evtSource.addEventListener("error", (e) => {
        //   console.log(e);
        //   if (e.readyState == EventSource.CLOSED) {
        //     console.log("连接关闭");
        //   } else {
        //     console.log(e);
        //   }
        // });

        this.evtSource = evtSource;
      } else {
        console.log("浏览器不支持 EventSource");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
html,
body,
#app {
  height: var(--box-height);
  width: var(--box-width);
  position: relative;
}
</style>
